<template>
	<div id="home">	
	<appVue :closeWZA="isCloseWZA()">	
		<template #sectionContent>
				<div class="mytitle"><mytitle></mytitle></div>
				<!-- <sdf></sdf> -->	
			  <div class="banners"><mycarousel></mycarousel></div>

				<div class="content">	
				<div class="contentLeft">	
					<importantNews></importantNews>
						<hotspot></hotspot>	
				</div>	
				<news></news>
				</div>	
			<div class="myvideo"><myvideo></myvideo></div>

				<!-- <subject></subject> -->	
				<!-- 专题入口 -->
				<!-- <div class="myspecial"><myspecial></myspecial></div> -->
				<div class="mypicture"><mypicture></mypicture></div>
			
				
		</template>	
	</appVue>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
export default {
	components: {
		appVue: defineAsyncComponent(() => import(rootPath + '/src/app.vue')),
		myheader: defineAsyncComponent(() => import(rootPath + '/src/components/header/header.vue')),
		navs: defineAsyncComponent(() => import(rootPath + '/src/components/header/nav.vue')),
		search: defineAsyncComponent(() => import(rootPath + '/src/components/header/search.vue')),
		mytitle: defineAsyncComponent(() => import(rootPath + '/src/components/home/title.vue')),
		sdf: defineAsyncComponent(() => import(rootPath + '/src/components/home/sdf.vue')),
		mycarousel: defineAsyncComponent(() => import(rootPath + '/src/components/home/carousel.vue')),
		importantNews: defineAsyncComponent(() => import(rootPath + '/src/components/home/importantNews.vue')),
		hotspot: defineAsyncComponent(() => import(rootPath + '/src/components/home/hotspot.vue')),
		news: defineAsyncComponent(() => import(rootPath + '/src/components/home/news.vue')),
		myvideo: defineAsyncComponent(() => import(rootPath + '/src/components/home/video.vue')),
		subject: defineAsyncComponent(() => import(rootPath + '/src/components/home/subject.vue')),
		myspecial: defineAsyncComponent(() => import(rootPath + '/src/components/home/special.vue')),
		mypicture: defineAsyncComponent(() => import(rootPath + '/src/components/home/picture.vue')),
		contact: defineAsyncComponent(() => import(rootPath + '/src/components/footer/contact.vue')),
		information: defineAsyncComponent(() => import(rootPath + '/src/components/footer/information.vue'))
	},
	data() {
		return {
			isSearch: false,
			ele: {}
		};
	},
	watch: {
		ele(newVal) {
			console.log(newVal, 'newVal');
		}
	},

	methods: {
		loadList() {
		},
		isCloseWZA() {
			return localStorage.getItem('close') || false;
		}
	}
};
</script>

<style>
#home {
	height: fit-content;
	overflow: auto;
}
#home .navigation {
	width: 100%;
}
#home .mytitle {
	margin-top: 158px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#home .content {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#home .myvideo {
	margin-top: 60px;
}
#home .myspecial {
	margin-top: 60px;
}
#home .mypicture {
	margin-top: 60px;
}
#home .banners {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#home .content .contentLeft {
	width: 1200px;
	margin-top: 48px;
	display: flex;
}
#home .hotspot {
	margin-left: 40px;
}
</style>
<style>
.mhover :hover {
	color: #ff3333 !important;
	cursor: pointer;
}
</style>
